/* 
 * http://www.sencha.com/learn/intro-to-panels/
 */
Ext.namespace('myApp.viewComponents.indexIndex');

myApp.views.indexIndex = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout:{
        type:'vbox',
        align:'stretch'
    },
    defaults:{
        dock:'top',
        style:'border-bottom:1px solid black;',
        flex:1
    },
    listeners:{
        afterrender:function(){
            console.log('afterrender');
            this.timerId = setInterval(function(){console.info('toto')},1000);
        },
        beforedeactivate:function(){
            console.log('beforedeactivate');
            if(this.timerId > 0)
                clearInterval(this.timerId);
        }
    },
    items:[
        {
            xtype:'button',
            html:'Index/index',
            handler:function(){
                Ext.dispatch({
                    controller: "Index",
                    action:'index',
                    animation: { type: 'slide', direction: 'left' }
                })
            }
        },
        {
            xtype:'button',
            html:'Index/panel',
            handler:function(){
                Ext.dispatch({
                    controller: "Index",
                    action:'panel',
                    animation: { type: 'slide', direction: 'left' }
                })
            }
        },
        {
            xtype:'button',
            html:'Index/toolbar',
            handler:function(){
                Ext.dispatch({
                    controller: "Index",
                    action:'toolbar',
                    animation: { type: 'slide', direction: 'left' }
                })
            }
        },
        {
            xtype:'button',
            html:'Index/tabpanel',
            handler:function(){
                Ext.dispatch({
                    controller: "Index",
                    action:'tabpanel',
                    animation: { type: 'slide', direction: 'left' }
                })
            }
        },
        {
            xtype:'button',
            html:'Index/carousel',
            handler:function(){
                Ext.dispatch({
                    controller: "Index",
                    action:'carousel',
                    animation: { type: 'slide', direction: 'left' }
                })
            }
        },
        {
            xtype:'button',
            html:'Index/box',
            handler:function(){
                Ext.dispatch({
                    controller: "Index",
                    action:'box',
                    animation: { type: 'slide', direction: 'left' }
                })
            }
        },
        {
            xtype:'button',
            html:'Contact/index',
            handler:function(){
                Ext.dispatch({
                    controller: "Contact",
                    action:'index',
                    animation: { type: 'slide', direction: 'left' }
                })
            }
        }
    ],
    initComponent:function(){
        myApp.views.indexIndex.superclass.initComponent.apply(this,arguments);
    }
});
Ext.reg('indexIndex', myApp.views.indexIndex);
